<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="时间类型" prop="time_type">
					<el-select v-model="state.queryParams.time_type">
						<el-option label="昨日" :value="1" />
						<el-option label="今日" :value="2" />
						<el-option label="最近7天" :value="3" />
						<el-option label="最近30天" :value="4" />
						<el-option label="本月" :value="5" />
						<el-option label="上月" :value="6" />
						<el-option label="今年" :value="7" />
						<el-option label="去年" :value="8" />
						<el-option label="指定时间段" :value="9" />
					</el-select>
				</el-form-item>
				<el-form-item label="时间段" prop="time">
					<el-date-picker
						v-model="state.queryParams.time"
						type="daterange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						:default-time="state.defaultTime"
						:disabled="state.queryParams.time_type === 9 ? false : true"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>

			<div class="echart-container">
				<div ref="echartRef" id="echartId" style="width: 100%; height: 500px" class="echart"></div>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="ordersStatistics">
import { inject, onMounted, reactive, ref, watch, nextTick, onUnmounted } from 'vue';
import * as echarts from 'echarts';

import { statisticsApi } from '/@/api';

let myChart: any = null;
const Dayjs: any = inject('dayjs');
const StatisticsApi = statisticsApi();
// 窗口改变，图例自适应改变
window.onresize = () => myChart.resize();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		time_type: 1,
		time: [] as any,
		type: '',
		keyword: '',
		start_date: '',
		end_date: '',
	},
	tableList: [],
	loading: false,
	defaultTime: [new Date(Dayjs().year(), Dayjs().month(), Dayjs().date()), new Date(Dayjs().year(), Dayjs().month(), Dayjs().date())],
	option: {
		tooltip: {
			trigger: 'axis',
		},
		title: {
			text: '',
			x: 'center',
			y: 'center',
			textStyle: {},
		},
		xAxis: {
			name: '',
			type: 'category',
			axisLabel: {
				rotate: 45,
				// interval: 0
			},
			data: [],
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				name: '订单金额',
				type: 'line',
				data: [] as any,
			},
			{
				name: '订单数',
				type: 'line',
				data: [] as any,
			},
			{
				name: '发货前退款金额',
				type: 'line',
				data: [] as any,
			},
			{
				name: '发货前退款订单数',
				type: 'line',
				data: [] as any,
			},
		],
		// dataZoom: [
		// 	{
		// 		xAxisIndex: [0],
		// 		show: true,
		// 		type: "slider",
		// 		startValue: 0,
		// 		filterMode: 'filter'
		// 	}
		// ]
	},
});
const queryFormRef = ref();
let echartRef: any = ref(null);

onMounted(() => {
	getList();
	nextTick(() => {
		var dom = echartRef.value;
		if (dom) {
			myChart = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false,
			});
			myChart.setOption(state.option);
		}
	});
});
onUnmounted(() => {
	myChart.dispose();
});
watch(
	() => state.queryParams.time_type,
	(e) => {
		state.queryParams.keyword = '';
		state.queryParams.start_date = '';
		state.queryParams.end_date = '';
		state.option.xAxis.data = [];
		switch (e) {
			case 1:
				const start_time1 = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				const end_time1 = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				state.queryParams.time = [start_time1, end_time1];
				state.queryParams.type = 'day';
				state.queryParams.keyword = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				break;
			case 2:
				const start_time2 = Dayjs().format('YYYY-MM-DD');
				const end_time2 = Dayjs().format('YYYY-MM-DD');
				state.queryParams.time = [start_time2, end_time2];
				state.queryParams.type = 'day';
				state.queryParams.keyword = Dayjs().format('YYYY-MM-DD');
				break;
			case 3:
				const start_time3 = Dayjs().subtract(7, 'day').format('YYYY-MM-DD');
				const end_time3 = Dayjs().format('YYYY-MM-DD');
				state.queryParams.time = [start_time3, end_time3];
				state.queryParams.type = 'days';
				state.queryParams.start_date = start_time3;
				state.queryParams.end_date = end_time3;
				break;
			case 4:
				const start_time4 = Dayjs().subtract(30, 'day').format('YYYY-MM-DD');
				const end_time4 = Dayjs().format('YYYY-MM-DD');
				state.queryParams.time = [start_time4, end_time4];
				state.queryParams.type = 'days';
				state.queryParams.start_date = start_time4;
				state.queryParams.end_date = end_time4;
				break;
			case 5:
				const start_time5 = Dayjs().startOf('month').format('YYYY-MM-DD');
				const end_time5 = Dayjs().endOf('month').format('YYYY-MM-DD');
				state.queryParams.time = [start_time5, end_time5];
				state.queryParams.type = 'month';
				state.queryParams.keyword = Dayjs().startOf('month').format('YYYY-MM');
				break;
			case 6:
				const start_time6 = Dayjs().subtract(1, 'months').startOf('month').format('YYYY-MM-DD');
				const end_time6 = Dayjs().subtract(1, 'months').endOf('month').format('YYYY-MM-DD');
				state.queryParams.time = [start_time6, end_time6];
				state.queryParams.type = 'month';
				state.queryParams.keyword = Dayjs().subtract(1, 'months').startOf('month').format('YYYY-MM');
				break;
			case 7:
				const start_time7 = Dayjs().startOf('year').format('YYYY-MM-DD');
				const end_time7 = Dayjs().endOf('year').format('YYYY-MM-DD');
				state.queryParams.time = [start_time7, end_time7];
				state.queryParams.type = 'year';
				state.queryParams.keyword = Dayjs().startOf('year').format('YYYY');
				break;
			case 8:
				const start_time8 = Dayjs().subtract(1, 'years').startOf('years').format('YYYY-MM-DD');
				const end_time8 = Dayjs().subtract(1, 'years').endOf('years').format('YYYY-MM-DD');
				state.queryParams.time = [start_time8, end_time8];
				state.queryParams.type = 'year';
				state.queryParams.keyword = Dayjs().subtract(1, 'years').startOf('years').format('YYYY');
				break;
			case 9:
				const start_time9 = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				const end_time9 = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				state.queryParams.time = [start_time9, end_time9];
				state.queryParams.type = 'days';
				state.queryParams.start_date = start_time9;
				state.queryParams.end_date = end_time9;
				break;
		}
	},
	{
		immediate: true,
	}
);

/********** 触发事件 **********/
// 查询
const onQuery = () => {
	if (state.queryParams.time_type == 9) {
		state.queryParams.start_date = state.queryParams.time[0];
		state.queryParams.end_date = state.queryParams.time[1];
		state.queryParams.type = 'days';
	}

	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	nextTick(() => {
		onQuery();
	});
};
// 设置echarts
const setEcharts = () => {
	let startDate: any = ''; // 开始h时间
	let endDate: any = ''; // 结束时间
	let type: any = ''; // 坐标轴增加类型
	switch (state.queryParams.time_type) {
		case 1:
		case 2:
			startDate = Dayjs(state.queryParams.keyword);
			endDate = Dayjs(state.queryParams.keyword);
			type = 'hour';
			break;
		case 3:
			startDate = Dayjs().subtract(7, 'day');
			endDate = Dayjs().endOf('day');
			type = 'day';
			break;
		case 4:
			startDate = Dayjs().subtract(30, 'day');
			endDate = Dayjs().endOf('day');
			type = 'day';
			break;
		case 5:
			startDate = Dayjs().startOf('month');
			endDate = Dayjs().endOf('month');
			type = 'day';
			break;
		case 6:
			startDate = Dayjs().subtract(1, 'months').startOf('month');
			endDate = Dayjs().subtract(1, 'months').endOf('month');
			type = 'day';
			break;
		case 7:
			startDate = Dayjs().startOf('year');
			endDate = Dayjs().endOf('year');
			type = 'month';
			break;
		case 8:
			startDate = Dayjs().subtract(1, 'years').startOf('year');
			endDate = Dayjs().subtract(1, 'years').endOf('year');
			type = 'month';
			break;
		case 9:
			startDate = Dayjs(state.queryParams.start_date);
			endDate = state.queryParams.end_date;
			type = 'day';
			break;
		default:
			break;
	}
	let xAxis_data: any = []; // x轴列表
	let currentDate = startDate;
	let format = ''; // format格式
	switch (type) {
		case 'month':
			state.option.xAxis.name = '月份';
			format = 'MM月';
			break;
		case 'hour':
			state.option.xAxis.name = '时间';
			format = 'HH:mm';
			break;
		default:
			state.option.xAxis.name = '日期';
			format = 'YYYY-MM-DD';
			break;
	}
	if (type == 'hour') {
		for (let i = 0; i < 24; i++) {
			xAxis_data.push(currentDate.add(i, 'hour').format(format));
		}
	} else {
		while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, type)) {
			xAxis_data.push(currentDate.format(format)); // 将日期格式化为字符串并添加到数组中
			currentDate = currentDate.add(1, type); // 增加一天
		}
	}
	state.option.xAxis.data = xAxis_data;
	state.option.series[0].data = state.tableList.map((item: any) => {
		return item.order_total_amt || 0;
	});
	state.option.series[1].data = state.tableList.map((item: any) => {
		return item.order_total_num || 0;
	});
	state.option.series[2].data = state.tableList.map((item: any) => {
		return item.refund_order_total_amt || 0;
	});
	state.option.series[3].data = state.tableList.map((item: any) => {
		return item.refund_order_total_num || 0;
	});
	myChart.setOption(state.option);
};
/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	if (state.queryParams.time_type === 9) {
		state.queryParams.start_date = state.queryParams.time[0];
		state.queryParams.end_date = state.queryParams.time[1];
	}
	_orderStatistics(state.queryParams);
};
/********** 网络事件 **********/
// 订单统计
const _orderStatistics = (params: Object) => {
	StatisticsApi.orderStatistics(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.loading = false;
			state.option.title.text = !state.tableList.length ? '暂无数据' : '';
			setEcharts();
		})
		.catch(() => (state.loading = false));
};
</script>
